<template>
	<el-row :gutter="40" class="index" style="margin-left: 0px;background-color: #f9f9f9;height: 100%;">
		<div style="position: fixed;width: 50px;height: 50px;right:0;z-index: 999;">
			<img src="../../assets/images/ceshi.jpg" style="width: 100%;border-radius: 50%;"/>
		</div>
		<view style="width: 100%;margin-left: 20px;">
			<h2>Overview</h2>
			<el-row :gutter="40">
				<el-col :span="8">
					<div class="index-first">
						<img style="width: 13px;height: 10px;" src="../../assets/images/ceshi.jpg" />
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								SGD 500,000,000.00
							</div>
							<div class="index-first-ctext">
								Cash Balance
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="index-first">
						<img style="width: 13px;height: 10px;" src="../../assets/images/ceshi.jpg" />
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								SGD 10,000.00
							</div>
							<div class="index-first-ctext">
								Unpaid Invoice
								<span class="index-first-text-red">Overdue: 5,000.00</span>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="index-first">
						<img style="width: 13px;height: 10px;" src="../../assets/images/ceshi.jpg" />
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								SGD 10,000.00
							</div>
							<div class="index-first-ctext">
								Unpaid Bill
								<span class="index-first-text-red">Overdue: 5,000.00</span>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="40" style="margin-top: 16px;">
				<el-col :span="8">
					<div class="index-first">
						<div style="padding-left: 10px;">
							<div class="index-first-text">
								Profit & Loss
							</div>
							<columnar-chart></columnar-chart>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="index-first">
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								Sales Trend
								<el-select style="margin-left: 120px;width: 100px;"  v-model="state.value" class="m-2" placeholder="Select" size="small">
									<el-option v-for="item in state.options" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
							<line-chart></line-chart>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="index-first">
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								SGD 12,500.00
								<el-select style="margin-left: 120px;width: 100px;"  v-model="state.value" class="m-2" placeholder="Select" size="small">
									<el-option v-for="item in state.options" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
							<div class="index-first-ctext">
								Expenses
							</div>
							<pie-chart></pie-chart>
						</div>
					</div>
				</el-col>
			</el-row>
		</view>
		
		<view style="width: 100%;margin-left: 20px;margin-top: 20px;">
			<div>
				<h2>Transactions</h2>
			</div>
			
			<el-row :gutter="40">
				<el-col :span="8">
					<div class="index-first">
						<img style="width: 13px;height: 10px;" src="../../assets/images/ceshi.jpg" />
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								SGD 500,000,000.00
							</div>
							<div class="index-first-ctext">
								Cash Balance
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="index-first">
						<img style="width: 13px;height: 10px;" src="../../assets/images/ceshi.jpg" />
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								SGD 10,000.00
							</div>
							<div class="index-first-ctext">
								Unpaid Invoice
								<span class="index-first-text-red">Overdue: 5,000.00</span>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="index-first">
						<img style="width: 13px;height: 10px;" src="../../assets/images/ceshi.jpg" />
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								SGD 10,000.00
							</div>
							<div class="index-first-ctext">
								Unpaid Bill
								<span class="index-first-text-red">Overdue: 5,000.00</span>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="40" style="margin-top: 16px;">
				<el-col :span="8">
					<div class="index-first">
						<div style="padding-left: 10px;">
							<div class="index-first-text">
								Profit & Loss
							</div>
							<columnar-chart></columnar-chart>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="index-first">
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								Sales Trend
								<el-select style="margin-left: 120px;width: 100px;"  v-model="state.value" class="m-2" placeholder="Select" size="small">
									<el-option v-for="item in state.options" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
							<line-chart></line-chart>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="index-first">
						<div class="card-panel-description" style="padding-left: 10px;">
							<div class="index-first-text">
								SGD 12,500.00
								<el-select style="margin-left: 120px;width: 100px;"  v-model="state.value" class="m-2" placeholder="Select" size="small">
									<el-option v-for="item in state.options" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</div>
							<div class="index-first-ctext">
								Expenses
							</div>
							<pie-chart></pie-chart>
						</div>
					</div>
				</el-col>
			</el-row>
		</view>
	</el-row>
</template>

<script setup>
	import ColumnarChart from '../../components/home/columnarChart.vue'
	import LineChart from '../../components/home/lineChart.vue'
	import PieChart from '../../components/home/pieChart.vue'

	import {
		ref,
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue'

	const {
		proxy
	} = getCurrentInstance()

	const {
		name
	} = toRefs(reactive(proxy.$store.getters))

	const state = reactive({
		value:"",
		options:[
			{
			    value: '1',
			    label: '星期一',
			  },
			  {
			    value: '2',
			    label: '星期二',
			  },
			  {
			    value: '3',
			    label: '星期三',
			  },
		]
	})

	// 改变 name
	function setName() {
		proxy.$store.dispatch('setName')
	}
</script>

<style lang="scss">
	.index {
		margin: 20px;
	}

	.index-first {
		padding: 10px 10px 10px 20px;
		background-color: #FFFFFF;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.index-first-text {
		color: #333333;
		font-family: 'DIN 圆头 Pro';
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
	}

	.index-first-ctext {
		color: #767676;
		font-family: 'DIN 圆头 Pro';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
	}

	.index-first-text-red {
		color: #EB5757;
		font-family: 'DIN 圆头 Pro';
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
	}
</style>
